import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  Dimensions,
  TouchableNativeFeedback,
  TouchableOpacity,
} from 'react-native';


const { width, height } = Dimensions.get('window');

import Change from './change'

const testdata={
						"id": "d0344ede7e434df1864a95b25e84c682",
						"index":"0a0b0",
						"isNewRecord": false,
						"foodid": "b58b21e2bc51493aabb8ffc5313e58f3",
						"foodspecsid": "98d92f70cfb04df38b371717807c90ea",
						"price": 0.01,
						"nowprice": 0.01,
						"fooddescriotion": "",
						"listName": "份",
						"num": 0,
						"foodname": "盖饭"
					}

const styles = StyleSheet.create({
    warpwarp:{
        width:width,
        height:'100%',
        position:'absolute',
        left:0,
        top:0,
        backgroundColor:'rgba(0,0,0,0.5)'
    },
  warp:{
      width:5*width/6,
      backgroundColor:'white',
      position:'absolute',
      top:100 ,
      left:width/12,
      borderWidth:0.5,
      borderColor:'#ddd',
      shadowColor:'black',
      elevation: 7,
      shadowOpacity:0.5
  },
  content:{
      marginTop:20,
      width:5*width/6,
      padding:10,
  },
  top:{
      width:5*width/6,
      textAlign:'center',
      height:30,
      lineHeight:25,
      borderBottomWidth:0.5,
      borderColor:'#ddd'
  },
  bottom:{
      marginTop:10,
      width:5*width/6,
      flexDirection:'row',
      justifyContent:"space-between",
      alignItems:'center',
      padding:10
  },
  intop:{
      width:'100%',
      textAlign:'left'
  },
  incontent:{
      width:'100%',
      flexDirection:'row',
      justifyContent:'flex-start',
      alignItems:'center',
      flexWrap:'wrap',
  },
  intext:{
      marginTop:10,
      marginLeft:5,
      width:'30%',
      padding:5,
      borderWidth:0.5,
      borderColor:'#ddd',
      backgroundColor:'#dd2244',
      textAlign:'center'
  },
  intext1:{
      marginTop:10,
      marginLeft:5,
      width:'30%',
      padding:5,
      borderWidth:0.5,
      borderColor:'#ddd',
      textAlign:'center'
  }
});



export default class Specif extends Component{
    constructor(props) {
    super(props);
    this.state={
        chosenum:0,
    }
    }

    chosed=function(i){
        this.setState({
            chosenum:i
        })
    }

    render(){
        var pages = [];
        var _this=this
    for (var i = 0; i < this.props.data.listin.length; i++) {
        (function(i){
      pages.push(
        <Text onPress={()=>{_this.chosed(i)}} key={ i } style={i==_this.state.chosenum?styles.intext:styles.intext1}>{_this.props.data.listin[i].listName}</Text>
      );
      })(i)
    }
    return(
        <TouchableNativeFeedback
        onPress={()=>{
            this.props.close()
        }}
        >
        <View style={styles.warpwarp}>
        <TouchableNativeFeedback
        onPress={()=>{
            
        }}
        >
        <View style={styles.warp}>
            <Text style={styles.top}>{this.props.data.listName}</Text>
            <View style={styles.content}>
                <Text style={styles.intop}>规格</Text>
                <View style={styles.incontent}>
                    { pages}
                </View>
            </View>
            <View style={styles.bottom}>
            <Text>{this.props.data.listin[this.state.chosenum].listName}({this.props.data.listin[this.state.chosenum].price})</Text>
            <Change makesure={()=>{}} data={this.props.data.listin[this.state.chosenum]}/>
            </View>
        </View>
        </TouchableNativeFeedback>
        </View>
        </TouchableNativeFeedback>
    )
}
}

